<template>
 <div style="width: 100%;height: 100%;padding: 16px 20px;position: relative;">
    <div style="width: 400px;height: 100%;border-radius: 5px;background-color: white;float: right;display: inline-block;position: relative;">
        <div v-if="rightPageId==5" style="width: 100%;height: 100%;">
            <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
                <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
                    rightPageId=0;
                }">
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
                </div>
                删除全部城市
            </div>
            <div style="padding: 20px 20x;">
          <div style="padding: 20px 20px;">
          <div style="margin-bottom: 15px;">
            此操作将删除全部城市且不可恢复。
          </div>
          <div style="text-align: right;">
            <a-button type="primary" status="danger" style="padding: 0 30px;" :loading="isDeleting" @click="deleteAll">删除</a-button>
          </div>
        </div>
        </div>
        </div>
        <div v-if="rightPageId==4" style="width: 100%;height: 100%;">
            <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
                <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
                    rightPageId=0;
                }">
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
                </div>
                删除选中的城市
            </div>
            <div style="padding: 20px 20x;">
          <div style="padding: 20px 20px;">
          <div style="margin-bottom: 15px;">
            此操作将删除选中的城市且不可恢复。
          </div>
          <div style="text-align: right;">
            <a-button type="primary" status="danger" style="padding: 0 30px;" :loading="isDeleting" @click="deleteSelected">删除</a-button>
          </div>
        </div>
        </div>
        </div>
        <div v-if="rightPageId==3" style="height: 100%;width: 100%;">
            <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
                <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
                    if(importStep==2){
                        return;
                    }
                    rightPageId=0;
                }">
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
                </div>
                导入城市
            </div>
            <div style="width: 100%;height: calc(100% - 56.75px);padding: 20px 20px;overflow-y: scroll;">
                <div style="line-height: 25px;margin-bottom: 20px;">
                <p>表格文件要求</p>
                <p>1.专业目录数据应保存在表格文件的第一个表格中；</p>
                <p>2.表格的第一行应为每一列数据的标题，并且必须包括“城市”和“等级”这几个标题；</p>
                <p>3.如果表格文件符合上面的要求但是不能正常导入，可能是表格内某些单元格的值过长造成的。</p>
              </div>
              <a-steps label-placement="horizontal" direction="vertical" :current="importStep">
                <a-step>选择Excel文件
                  <br>
                  <input style="font-size: 14px;" :disabled="importStep!=1" type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload" @change="readExcel">
                  <br>
                  <div v-if="importWarningText!=''" style="line-height: 30px;color: red;margin-bottom: 15px;">
                    {{ importWarningText }}
                  </div>
                </a-step>
                <a-step>正在导入
                  <br>
                  <a-button v-if="importStep==2" :loading="true" style="background-color: white !important;color: black !important;margin-top: 10px;">正在处理，请耐心等待。
                    <br>请不要关闭浏览器或离开当前页面。
                    <br>已完成{{  parseInt(importedNum/importNum*100) }}%
                  </a-button>
                </a-step>
                <a-step>完成导入
                  <br>
                  <div v-if="importStep==3" style="font-size: 14px;">
                    共导入{{ importNum }}个城市。
                  </div>
                </a-step>
              </a-steps>
            </div>
        </div>
        <div v-if="rightPageId==2" style="height: 100%;width: 100%;">
            <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
                <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
                    if(isUpdating){
                        return;
                    }
                rightPageId=0
                }">
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
                </div>
                修改城市
            </div>
            <div style="width: 100%;height: calc(100% - 112px);padding: 20px 20px;overflow-y: scroll;">
                <span>
                    <div style="display: inline-block;width: 100%;margin-bottom: 10px;">
                        城市
                        <a-input :disabled="true" v-model="updateForm.name" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入城市"></a-input>
                    </div>
                </span>
                <span>
                    <div style="display: inline-block;width: 100%;margin-bottom: 10px;">
                        等级
                        <a-radio-group v-model="updateForm.level" style="background-color: white;border-radius: 2px;border-bottom: 1px solid rgb(0,120,215);padding: 10px 0;line-height: 30px;">
                            <a-radio value="一线">一线</a-radio>
                            <a-radio value="二线">二线</a-radio>
                            <a-radio value="三线">三线</a-radio>
                            <a-radio value="四线">四线</a-radio>
                            <a-radio value="五线">五线</a-radio>
                        </a-radio-group>
                    </div>
                </span>
            </div>
            <div style="padding: 10px 20px;width: 100%;height: 56px;text-align: right;">
                <a-button style="padding: 0 30px;" type="primary" :loading="isUpdating" @click="updateCity">修改</a-button>
            </div>
        </div>
        <div v-if="rightPageId==1" style="height: 100%;width: 100%;">
                <div style="padding: 20px 20px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-4);position: relative;padding-left: 55px;">
                <div style="padding: 20px 20px;position: absolute;left: 0;top: 0;cursor: pointer;" @click="()=>{
                rightPageId=0
                }">
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.272 24l16.263 16.264a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L11.03 25.414a2 2 0 010-2.828L28.706 4.908a1 1 0 011.414 0l1.415 1.414a1 1 0 010 1.415L15.271 24z" fill="currentColor"/></svg>
                </div>
                添加城市
            </div>
            <div style="width: 100%;height: calc(100% - 112px);padding: 20px 20px;overflow-y: scroll;">
                <span>
                    <div style="display: inline-block;width: 100%;margin-bottom: 10px;">
                        城市
                        <a-input v-model="addForm.name" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入城市"></a-input>
                    </div>
                </span>
                <span>
                    <div style="display: inline-block;width: 100%;margin-bottom: 10px;">
                        等级
                        <a-radio-group v-model="addForm.level" style="background-color: white;border-radius: 2px;border-bottom: 1px solid rgb(0,120,215);padding: 10px 0;line-height: 30px;">
                            <a-radio value="一线城市">一线城市</a-radio>
                            <a-radio value="二线城市">二线城市</a-radio>
                            <a-radio value="三线城市">三线城市</a-radio>
                            <a-radio value="四线城市">四线城市</a-radio>
                            <a-radio value="五线城市">五线城市</a-radio>
                        </a-radio-group>
                    </div>
                </span>
            </div>
            <div style="padding: 10px 20px;width: 100%;height: 56px;text-align: right;">
                <a-button style="padding: 0 30px;" type="primary" :loading="isAdding" @click="addCity">添加</a-button>
            </div>
        </div>
        <div v-if="rightPageId==0">
            <div style="padding: 20px 20px;border-bottom: 1px solid var(--color-neutral-4);position: relative;">
                菜单
            </div>
            <div style="padding: 10px 10px;height: calc(100% - 56.76px);width: 100%;overflow-y: scroll;">
          <div class="right-button" @click="rightPageId=1">
              添加城市
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
          </div>
          <div class="right-button" @click="rightPageId=3">
              导入城市
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
          </div>
          <div class="right-button" @click="rightPageId=4">
              删除选中的城市
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
          </div>
          <div class="right-button" @click="rightPageId=5">
              删除全部城市
              <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
          </div>
        </div>
        </div>
    </div>
    <div style="width: calc(100% - 420px);height: 100%;background-color: white;border-radius: 5px;float: left;display: inline-block;position: relative;">
        <div style="padding: 20px 20px;border-bottom: 1px solid var(--color-neutral-4);position: relative;">
            城市管理
        </div>
        <div style="width: 100%;height: calc(100% - 56.75px);padding: 20px 20px;position: relative;">
      <div style="width: 100%;">
        <span>
          <div style="display: inline-block;width: calc(100%);">
            城市
            <a-input v-model="searchForm.name" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;height: 35px;" placeholder="请输入城市"></a-input>
          </div>
        </span>
      </div>
      <div style="margin-top: 10px;text-align: right;">
        <a-button style="padding: 0 30px;" :loading="isSearching" @click="()=>{
          searchForm.name='';
          getCities();
        }">显示全部</a-button>
        <a-button style="padding: 0 30px;margin-left: 10px;" type="primary" :loading="isSearching" @click="getCities">查找</a-button>
      </div>
    <a-table @row-click="(e)=>{
      this.updateForm=e;
      this.rightPageId=2;
    }" v-model:selected-keys="selectedKeys" :row-selection="{
      type: 'checkbox',
      showCheckedAll: true
    }" :loading="isSearching" :columns="[
      {
        title:'城市',
        dataIndex:'name',
      },
      {
        title:'等级',
        dataIndex:'level',
      },
    ]" style="margin-top: 10px;" :data="cities"></a-table>
    </div>
    </div>
 </div>
</template>

<script>
import { read, utils } from 'xlsx'
// const xlsx = XLSX
import axios from 'axios'
// import path from 'path'

export default{
  data(){
    return{
      searchForm:{
        name:'',
      },
      rightPageId:0,
      cities:[],
      isSearching:false,
      addForm:{
        name:'',
        level:'一线城市',
      },
      isAdding:false,
      updateForm:undefined,
      isUpdating:false,
      importStep:1,
      importNum:0,
      importedNum:0,
      importWarningText:'',
      selectedKeys:[],
      isDeleting:false,
    }
  },
  mounted(){
    this.getCities();
  },
  methods:{
    deleteAll(){
        this.isDeleting=true;
        var config = {
   method: 'post',
   url: '/api/v1/cities/deleteAll',
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
    this.isDeleting=false;
   if(res.data.status==1){
        this.rightPageId=0;
        this.getCities();
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    deleteSelected(){
        if(this.selectedKeys.length==0){
            this.$message.error({
                content:'未选择城市'
            })
            return;
        }
        this.isDeleting=true;
        var config = {
   method: 'post',
   url: '/api/v1/cities/deleteSelected',
   headers: { 
      'Accept': '*/*', 
   },
   data : JSON.stringify(this.selectedKeys)
};

axios(config)
.then(() => {
   this.rightPageId=0;
   this.isDeleting=false;
   this.getCities();
})
    },
    importToBackground(arr,start,resend){
        let pre = [];
      for(let i=start;i<start+30;i++){
        if(arr[i]==undefined)continue;
        pre.push(arr[i]);
      }
      if(resend!=undefined){
        pre=resend;
      }
      var config = {
   method: 'post',
   url: '/api/v1/cities/import',
   headers: { 
      'Accept': '*/*', 
   },
   data : JSON.stringify(pre)
};

axios(config)
.then((res) => {
  if(res.data.status==2){
    this.importToBackground(arr,start,pre);
  }else{
    this.importedNum+=pre.length;
   if(arr.length-1<=start+30){
    this.importStep=3;
    this.getCities();
   }else{
    this.importToBackground(arr,start+30);
   }
  }
  
})
    },
    readExcel(e) {
      this.importWarningText='';
//  var that = this;
const files = e.target.files;
// 如果没有文件名
if(files.length<=0){
return false;
}else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
return false;
}
this.importUniversityStep=2;
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
// 切换为新的调用方式
const workbook = read(data, {
type: 'binary'
});
// 取第一张表
const wsname = workbook.SheetNames[0];
// 切换为新的调用方式 生成json表格内容
const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
console.log(ws);
// 后续为自己对ws数据的处理
if(ws[0]['城市']==undefined || ws[0]['等级']==undefined){
    this.importWarningText='文件不符合要求。'
    return;
}
let pre = [];
for(let i=0;i<ws.length;i++){
  pre.push({
    name:ws[i]['城市'],
    level:ws[i]['等级'],
  })
}
this.importNum=pre.length;
this.importedNum=0;
this.importToBackground(pre,0);
this.importStep=2;

} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
},
    updateCity(){
        var config = {
   method: 'post',
   url: '/api/v1/cities/update?data=' + JSON.stringify(this.updateForm),
   headers: { 
      'Accept': '*/*', 
   }
};
this.isUpdating=true;
axios(config)
.then((res) => {
    this.isUpdating=false;
   if(res.data.status==1){
    this.getCities();
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },  
    addCity(){
        if(this.addForm.name==''){
            this.$message.error({
                content:'未输入城市'
            })
            return;
        }
        this.isAdding=true;
        var config = {
   method: 'post',
   url: '/api/v1/cities/add?data=' + JSON.stringify(this.addForm),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
    this.isAdding=false;
   if(res.data.status==1){
    this.addForm.name='';
    this.addForm.level='一线城市';
    this.getCities();
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    getCities(){
        this.isSearching=true;
        var config = {
   method: 'get',
   url: '/api/v1/cities/search?data=' + JSON.stringify(this.searchForm),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
    this.isSearching=false;
   if(res.data.status==1){
    this.cities=res.data.results;
    for(let i=0;i<this.cities.length;i++){
        this.cities[i]['key']=this.cities[i].name;
    }
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    }
  },
  props:{

  },
}
</script>

<style scoped>

.right-button svg{
  position: absolute;
  right: 15px;
  top: 15px;
}

.right-button:hover{
  background-color: rgb(242,242,242);
}

.right-button{
  width: 100%;
  padding: 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 15px;
  position: relative;
  margin-bottom: 5px;
}

</style>